<template>
    <div class='body'>
        <div class="topSlider">
            <div class="buttonBox">
                <el-button type="primary" @click="creat">新建流程</el-button>
                <el-button type="info">导入流程</el-button>
            </div>
            <el-input v-model="input" class="searchInput" placeholder="输入流程名称模糊搜索流程"></el-input>
            <el-button type="primary">搜索</el-button>
        </div>
        <div class="table">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column label="流程名称">
                    <template #default="scope">
                        <div class="inputBox" style="cursor: pointer;" @click="editInput(scope.row)">
                            <span v-if="!scope.row.isInput">{{ scope.row.date }}<i class="el-icon-edit"
                                    style="display: none;color: #1890ff;"></i></span>
                        </div>
                        <el-input ref="myInput" v-if="scope.row.isInput" v-model="scope.row.date"
                            @blur="handleQuery(scope.row)" @keyup.enter.native="handleQuery(scope.row)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="组件版本">
                </el-table-column>
                <el-table-column prop="address" label="更新时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" type="success">运行</el-button>
                        <el-button size="small" type="primary">编辑</el-button>
                        <el-button size="small" type="warning">复制</el-button>
                        <el-button size="small" type="info">详情</el-button>
                        <el-button size="small" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script setup lang="ts">
import router from '@/router';
import { getCurrentInstance, onBeforeMount, onMounted, reactive, ref } from 'vue'
const props = defineProps({

})
const input = ref<string>('');
const tableData = reactive<any>([{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄',
    isInput: false,
}, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄',
    isInput: false,
}, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄',
    isInput: false,
}, {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄',
    isInput: false,
}])
const state = reactive({

})
const handleQuery = (e: any) => {
    e.isInput = false;
};
const editInput = (e: any) => {
    e.isInput = true;
};
const creat = () => {
    router.push('/rpa/form/add')
}
onMounted(() => {

})
</script>
<style lang="scss" scoped>
.body {
    padding: 20px;
}

.el-input {
    width: 400px;
}

.topSlider {
    display: flex;
    margin-bottom: 20px;
}

.searchInput {
    margin-left: 200px;
    margin-right: 20px;
}

::v-deep .el-table__cell {
    .cell {
        height: 40px !important;
        line-height: 40px !important;
    }
}

::v-deep .inputBox:hover>span>.el-icon-edit {
    display: inline-block !important;
    ;
}
</style>
